<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星野画集 - 个人艺术空间</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="container">
      <div class="logo">星野画集</div>
      <ul class="nav-links">
        <li><a href="#home" class="active">首页</a></li>
        <li><a href="#works">作品</a></li>
        <li><a href="#process">创作过程</a></li>
        <li><a href="#blog">博客</a></li>
        <li><a href="#contact">联系我</a></li>
      </ul>
      <div class="search-box">
        <input type="text" placeholder="搜索作品...">
        <button><i class="fas fa-search"></i></button>
      </div>
    </div>
  </nav>

  <!-- 英雄区域 -->
  <section id="home" class="hero-section">
    <div class="container">
      <div class="profile-card">
        <div class="avatar-container">
          <img src="images/avatar.jpg" alt="星野的头像" class="avatar">
          <div class="avatar-placeholder" style="display: none;">
            <i class="fas fa-user-circle"></i>
          </div>
        </div>
        <div class="profile-info">
          <h1 class="username">星野</h1>
          <p class="user-title">自由插画师 | 动画设计师</p>
          <div class="stats">
            <div class="stat-item">
              <span class="stat-number">42</span>
              <span class="stat-name">作品</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">18</span>
              <span class="stat-name">教程</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">2.5k</span>
              <span class="stat-name">粉丝</span>
            </div>
          </div>
          <button class="follow-btn">关注</button>
        </div>
      </div>

      <div class="bio-section">
        <h2>关于我</h2>
        <p>
          大家好！我是星野，一名热爱二次元文化的插画师。擅长日系动漫风格，尤其喜欢绘制少女和奇幻场景。
          从事插画工作5年，曾为多本轻小说和游戏绘制插画。希望通过我的作品能给大家带来治愈和快乐。
        </p>
        <p>
          定期分享绘画技巧和创作过程，欢迎大家交流学习！
        </p>
      </div>
    </div>
  </section>

  <!-- 作品展示区 -->
  <section id="works" class="works-section">
    <div class="container">
      <div class="section-header">
        <h2>作品集</h2>
        <div class="filter-tabs">
          <button class="filter-btn active" data-filter="all">全部</button>
          <button class="filter-btn" data-filter="illustration">插画</button>
          <button class="filter-btn" data-filter="concept">概念设计</button>
          <button class="filter-btn" data-filter="comic">漫画</button>
        </div>
      </div>

      <div class="works-grid" id="works-container">
        <!-- 作品将通过JS动态加载 -->
      </div>
    </div>
  </section>

  <!-- 创作过程视频区 -->
  <section id="process" class="process-section">
    <div class="container">
      <div class="section-header">
        <h2>创作过程</h2>
        <p>记录我的绘画步骤和技巧分享</p>
      </div>

      <div class="videos-container" id="videos-container">
        <!-- 视频将通过JS动态加载 -->
      </div>
    </div>
  </section>

  <!-- 博客区域 -->
  <section id="blog" class="blog-section">
    <div class="container">
      <div class="section-header">
        <h2>创作日志</h2>
        <p>分享我的绘画心得和日常</p>
      </div>

      <div class="blog-posts" id="blog-container">
        <!-- 博客将通过JS动态加载 -->
      </div>

      <button class="load-more-btn">加载更多</button>
    </div>
  </section>

  <!-- 联系区域 -->
  <section id="contact" class="contact-section">
    <div class="container">
      <div class="section-header">
        <h2>联系我</h2>
        <p>合作咨询或交流学习，欢迎随时联系</p>
      </div>

      <div class="contact-info">
        <div class="contact-item">
          <i class="fas fa-envelope"></i>
          <div>
            <h3>邮箱</h3>
            <p>hoshino@example.com</p>
          </div>
        </div>
        <div class="contact-item">
          <i class="fab fa-twitter"></i>
          <div>
            <h3>Twitter</h3>
            <p>@hoshino_art</p>
          </div>
        </div>
        <div class="contact-item">
          <i class="fab fa-pixiv"></i>
          <div>
            <h3>Pixiv</h3>
            <p>星野Art</p>
          </div>
        </div>
        <div class="contact-item">
          <i class="fab fa-bilibili"></i>
          <div>
            <h3>哔哩哔哩</h3>
            <p>星野画集</p>
          </div>
        </div>
      </div>

      <div class="contact-form">
        <h3>发送消息</h3>
        <form id="message-form">
          <div class="form-group">
            <label for="name">你的名字</label>
            <input type="text" id="name" required>
          </div>
          <div class="form-group">
            <label for="email">邮箱地址</label>
            <input type="email" id="email" required>
          </div>
          <div class="form-group">
            <label for="message">消息内容</label>
            <textarea id="message" rows="5" required></textarea>
          </div>
          <button type="submit" class="submit-btn">发送消息</button>
        </form>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-logo">星野画集</div>
        <p>© 2023 星野画集. 保留所有权利.</p>
        <div class="social-links">
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-pixiv"></i></a>
          <a href="#"><i class="fab fa-bilibili"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <!-- 作品查看模态框 -->
  <div class="modal" id="work-modal">
    <div class="modal-content">
      <span class="close-modal">&times;</span>
      <img src="" alt="作品大图" class="modal-image">
      <div class="modal-info">
        <h3 class="modal-title"></h3>
        <p class="modal-description"></p>
        <div class="modal-meta">
          <span class="modal-date"></span>
          <span class="modal-category"></span>
        </div>
      </div>
    </div>
  </div>

  <script src="js/main.js"></script>
</body>
</html>